<template>
    <!-- 申诉提交 -->
    <view class="px-[32rpx] pt-[30rpx]">
        <!-- 车辆信息卡片 -->
        <view class="px-[24rpx] pt-[26rpx] pb-[24rpx] bg-[#FFFFFF] rounded-[16rpx]">
            <view class="text-[28rpx] text-[#000000] font-[PingFangSC] font-[600]">本田CR-V 2013款 2.0L四驱经典版</view>
            <view class="flex justify-between mt-[24rpx]">
                <view class="bottom-btn">已接听</view>
                <view class="bottom-btn">独享线索</view>
                <view class="bottom-btn">补发线索</view>
                <view class="bottom-btn">定制包</view>
                <view class="bottom-btn">邀约失败</view>
            </view>

            <!-- 车辆详细信息 -->
            <view class="mt-[24rpx] text-[24rpx] text-[#666666]">
                <view class="flex justify-around mb-[12rpx] ml-[-32rpx]">
                    <view>2013-06上牌</view>
                    <view>|</view>
                    <view>17.2万公里</view>
                    <view>|</view>
                    <view>石家庄-玉华</view>
                </view>
                <view class="mb-[12rpx] ml-[-5rpx] ">派发时间 2024-01-01 10:23:12</view>
                <view class="ml-[-5rpx]">编号 309403909090</view>
            </view>
        </view>
        <!-- 客服提示 -->
        <view class="mt-[24rpx]">
            <view class="service-tip flex items-center pl-[32rpx] pr-[66rpx] pt-[38rpx]">
                <image class="w-[100rpx] h-[56.49rpx] mr-[12rpx]" src="@/static/images/img/kkf.png"></image>
                <view class="">
                    <view class="text-[24rpx] text-[#333333] font-[400] font-[PingFangSC]">很抱歉给您带来不好的体验，如有任何问题请联系专属客服处理。   <text class="text-[26rpx] text-[#000000] font-[500] mt-[4rpx]">去处理>></text></view>
                </view>
            </view>
            <view class="bg-[#FFFFFF] pt-[24rpx] px-[24rpx]">
                <view class="text-[32rpx] font-[600] text-[#000000]">申诉原因</view>
                <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8] mt-[8rpx] mb-[24rpx]"></view>
                <!-- 标签 -->
                <view class="flex flex-wrap pb-[24rpx]">
                    <view 
                        v-for="(item, index) in reasonList" 
                        :key="index"
                        class="reason-tag"
                        :class="{ 'active-reason-tag': item.selected }"
                        @click="selectReason(index)"
                    >
                        <text class="tag-text">{{ item.text }}</text>
                    </view>
                </view>
                <view class="text-[32rpx] font-[600] text-[#000000]">问题描述</view>
                <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8] mt-[8rpx] mb-[24rpx]"></view>
                <up-textarea v-model="value1" placeholder="请输入问题描述" ></up-textarea>
                <image   src="@/static/images/img/xg.png" class="w-[152rpx] mb-[20rpx] h-[152rpx] mt-[16rpx] p"></image>
            </view>
           
        </view>
        <view class="mt-[80rpx]"> <up-button 
          text="提交" 
          :customStyle="{
            width: '686rpx',
  height: '88rpx',
  color: 'rgba(255,239,184,1)',
  fontSize: '32rpx',
  fontWeight: '500',
  fontFamily: 'PingFangSC-Medium',
  background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)',
  backgroundSize: '100% 100%',
  border: 'none',
  borderRadius: '16rpx',
  lineHeight: '48rpx'
          }">
        </up-button></view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const description = ref('');

// 申诉原因列表
const reasonList = reactive([
    { text: '无卖车意向', selected: true },
    { text: '无法接通', selected: false },
    { text: '车商同行', selected: false },
    { text: '车辆已售', selected: false },
    { text: '超15年或20万公里', selected: false },
    { text: '线索售卖区域不符', selected: false },
    { text: '重复线索', selected: false },
    { text: '不提供看车时间地点', selected: false },
    { text: '非车主留资车主无意向', selected: false },
    { text: '不卖平台车商', selected: false },
    { text: '定制条件不符', selected: false }
]);

// 选择申诉原因
const selectReason = (index) => {
    reasonList.forEach((item, i) => {
        item.selected = i === index;
    });
};
</script>

<style scoped lang="scss">
.bottom-btn {
    padding: 10rpx 20rpx;
    background-color: #FFFBEB;
    border-radius: 8rpx;
    font-size: 22rpx;
    color: #9C8C57;
    text-align: center;
}

.service-tip {
    width: 686rpx;
    background: linear-gradient(to top, #FFFFFF 0%, #FFF9E8 100%);
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.reason-tag {
    height: 96rpx;
    width: calc((100% - 32rpx) / 3);
    background-color: #F5F5F5;
    color: #333333;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12rpx;
    text-align: center;
    padding: 10rpx;
    box-sizing: border-box;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
}

.reason-tag:nth-child(3n) {
    margin-right: 0;
}

.tag-text {
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.active-reason-tag {
    background-color: #FFFBEB;
    color: #9C8C57;
}
.u-textarea[data-v-31706dd7]{
    background-color:#F5F5F7 ;
}


</style>